<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="keywords" content="微信砍价,微信集赞,微信抢钱,微信超级加油,商家岛,客牛官网,微信招生神器,客牛微传,商家神器,商家岛,砍价平台,微信砍价,微信拼团,微信加油活动">
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta name="description"
          content="客牛微传,由微信用户群,区域化,社区化,从众话特点,专而推出了一系列用于商家如教育培训,家装设计,运动健身等等生活直接高密度消费行业的活动方式,精准吸纳本地客户.客牛,作为微信活动专业平台,将立足于微信,继续打造    活动第一品牌.">
    <title>用户可上传照片</title>
    <script>
      var width = document.documentElement.clientWidth;
      var scale = width / 375;
      var css = 'html{font-size:' +
        37.5 * scale +
        'px;}';
      document.write('<style>' + css + '</style>');
    </script>
    <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.js"></script>
</head>
<body>
<div id="app" v-cloak>
    <!-- 管理页面 -->
    <func-banner :mananger='true'></func-banner>
    <!-- 音符  -->

    <music :music="BgMusic"></music>
    <!-- 主页面开始 -->
    <div class="container">
        <header>
            <div class="banner_img">
                <img :src="BannerStr" alt="">
            </div>
            <div class="both"></div>
            <div class="activity_slogan">
                <h1>{{Title}}</h1>
            </div>
        </header>
        <content>
            <div class="w">
                <!-- 参加活动时间结束倒计时  -->
                <div class="activity_countdown">
                    <p>活动时间<span class="end_word">结束</span>倒计时:<span
                            class="dynamic_time"><span>{{countDown.days}}</span>天<span>{{countDown.hours}}</span>时<span>{{countDown.minutes}}</span>分<span>{{countDown.seconds}}</span>秒</span>
                    </p>
                    <div class="cup_icon">
                        <img src="/img/activity/collect/vote/element_cup_orange.png" alt="">
                    </div>
                </div>
                <!-- 排行信息 -->
                <div class="activity_des activity_msg">
                    <div class="activity_des_content">
                        <div class="search_msg">
                            <!-- 搜索栏 -->
                            <div class="search">
                                <div>
                                    <input type="text" class="search_input" id="search_input"  placeholder="请输入选手编号或作品名称">
                                </div>
                                <a href="JavaScript:;" v-on:click="SearchWorks">
                                    <div></div>
                                </a>
                            </div>
                            <!-- 搜索结果展示 -->
                            <div class="search_result">
                                <!-- 没有找到结果  -->
                                <div class="not_result" v-if="SearchResult.length == 0">
                                    <p>非常抱歉,没有找到相关作品</p>
                                </div>
                                <!-- 有结果 -->
                                <div class="have_result">
                                    <p>已为您找到<span class="result_number">{{SearchResult.length}}</span>个结果</p>
                                    <ul>
                                        <li v-for="item in SearchResult" v-on:click="ShowWorkDetail(item.JoinerId)">
                                            <img class="show_detail" :src="item.WorkImg">
                                            <div class="works_name">
                                                <p>{{item.WorksName}}</p>
                                                <p><span>{{item.Votes}}</span>票</p>
                                            </div>
                                            <div class="order">编号:{{item.Number}}</div>
                                            <div class="cast_vote">投TA一票</div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- 搜索结果 -->
                        <div class="order_class">
                            <div class="sort_order">
                                <ul>
                                    <li class="select" v-on:click="ByNumberRank">
                                        <a href="javascript:;">编号排列</a>
                                    </li>
                                    <li v-on:click="ByVoteRank">
                                        <a href="javascript:;">排行榜单</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">活动详情</a>
                                    </li>
                                </ul>
                            </div>
                            <!-- 排行方式 -->
                            <div class="rank_show_way">
                                <!-- 编号排序-->
                                <div class="game_works show_rules">
                                    <ul>
                                        <li v-for="(item,index) in NumberRank" v-on:click="ShowWorkDetail(item.JoinerId)">
                                            <img class="show_detail" :src="item.WorkImg">
                                            <div class="works_name">
                                                <p>{{item.WorksName}}</p>
                                                <p><span>{{item.Votes}}</span>票</p>
                                            </div>
                                            <div class="order">编号:{{index + 1}}</div>
                                            <div class="cast_vote">
                                                投TA一票
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <!-- 名次排行 -->
                                <div class="rank_game_works show_rules">
                                    <div>
                                        <ul id="rank_nav">
                                            <li class="select">图片排列</li>
                                            <li>文字排列</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <!-- 图片排列 -->
                                        <ul class="picture_rank show_way">
                                            <li v-for="(item,index) in RankList" v-on:click="ShowWorkDetail(item.JoinerId)">
                                                <img class="show_detail" :src="item.WorkImg">
                                                <div class="works_name">
                                                    <p>{{item.WorksName}}</p>
                                                    <p><span>{{item.Votes}}</span>票</p>
                                                </div>
                                                <div class="order">第{{index+1}}名</div>
                                                <div class="medal" v-if="index == 0">
                                                    <img src="/img/activity/collect/vote/element_firstprize.png"
                                                         alt="">
                                                </div>
                                                <div class="medal" v-if="index == 1">
                                                    <img src="/img/activity/collect/vote/element_secondprize.png"
                                                         alt="">
                                                </div>
                                                <div class="medal" v-if="index == 2">
                                                    <img src="/img/activity/collect/vote/element_thirdprize.png"
                                                         alt="">
                                                </div>
                                                <div class="cast_vote"
                                                     v-on:click="CastVote(RankList,item.Number,index)">投TA一票
                                                </div>
                                            </li>
                                        </ul>
                                        <!-- 文本排列 -->
                                        <div id="word_rank" class="show_way">
                                            <ul>
                                                <li>排名</li>
                                                <li>编号</li>
                                                <li>名称</li>
                                                <li>票数</li>
                                            </ul>
                                            <ul v-for="(item,index) in RankList">
                                                <li>{{item.Order}}</li>
                                                <li>{{item.Number}}</li>
                                                <li>{{item.WorksName}}</li>
                                                <li>{{item.Votes}}</li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <read-section  :sedata="Content"></read-section>
            </div>
        </content>
        <div class="both"></div>
    </div>
    <!-- 打开活动页时(没有投票按钮)-->
    <div class="footer" v-if="partinstatus == partinstatusall.HasJoinerNow">
        <a href="#search_input">搜索编号或名称</a>
        <a href="javascript:;" v-on:click="AlertJoinPop">我要报名参加</a>
    </div>
    <div class="footer" v-if="partinstatus==partinstatusall.JoinJustNow">
        <a href="javascript:;" v-on:click="AlertJoinPop">我要报名参加</a>
    </div>
    <div class="footer" v-if="partinstatus==partinstatusall.AtActInActiveStart">
        <a href="javascript:;">活动还未开始</a>
    </div>
    <div class="footer" v-if="partinstatus==partinstatusall.AtActInActiveEnd">
        <a href="javascript:;">活动已结束</a>
    </div>

    <add-msg :mobile="Mobile"></add-msg>
    <!-- 报名成功以及提示商家分享方法 -->

    <notice-pop :actstatus="ActStatus"></notice-pop>

    <!-- 分享标题以及副标题处弹窗 -->
    <share-pop :sharemsg="ShareMsg"></share-pop>
    <!-- 用户报名以及上传图片 -->
    <voteuser-join v-on:join="UserJoinAct" v-on:back="BackMine"></voteuser-join>
</div>
</body>
</html>